*{ margin: 0px; padding: 0px;font-family:"SimHei";}
a{ text-decoration: none;}
ul,li{ list-style: none}

@font-face {
    font-family: myFont;
    src: url("../css/myFont.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

#wrapper{width: 7.5rem;margin: 0 auto;background: #2d2c32;}
#wrapper.lin{ background: #fff;}
#wrapper.huge{background: url("../images/huge.png") no-repeat;background-size: cover;}

#topBar{width: 100%;height: 1rem;background: url("../images/title-bar.png") repeat-x; background-size:auto 100%;display: flex;justify-content: space-between;align-items: center;}
#topBar a{color: #fff;font-size: 0.26rem;margin: 0px 0.23rem;}

#img_box,#nine,#five{
    display: flex;
    width: 6rem;
    margin: 0.26rem auto;
    background: #fff;
}
#img_box.list{width: 7.44rem;margin: 0 auto;}
#img_box.end-box{
    background: #fefefe;
}
#img_box.end-box img{
    box-shadow: 0.02rem 0.02rem 0.1rem #dedede;
    width: 6rem;
    height: 8.2rem;
    margin-top: 0.3rem;
}
#img_box.one-ge{width: 6.6rem;}
#img_box.five-ge .pic{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0px 0.15rem 0.15rem 0px;
}
#img_box.nine-ge .pic,#nine {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 0.15rem;
}
#img_box.five-ge .pic:first-child{ margin-left: 0.15rem;}
#img_box.five-ge img{
    margin-top: 0.15rem;
    width: 3.15rem;
}
#img_box.one-ge img{width: 6.6rem;height: 7.9rem;float: left;}
#img_box.nine-ge img,#nine canvas{width: 1.8rem;height: 2.18rem;margin: 0.15rem 0px 0px 0.15rem;border-radius: 0.2rem;}
#img_box.five-ge .pic:first-child img{ width: 3.24rem;}


#five .pic {
    display: flex;
    flex-direction: column;
}



#filter{ background: #fff;}
#filter.lin{ background: #E7EDED; border-top: 1px solid #dedede;}
#filter .topper{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 0.52rem;
    background: #eaeaea;
}
#filter .topper a{
    font-size: 0.26rem;
    display: block;
    width: 33.3%;
    height: 0.52rem;
    text-align: center;
    color: #5d5d5d;
    line-height: 0.52rem;
    border-bottom: transparent 0.03rem solid;
}
#filter .topper a.cur{border-bottom: #FF6A00 0.03rem solid;}
#filter .btm-box{
    padding: 0.1rem;
}
#filter.lin .btm-box{padding: 0.11rem .4rem;}
#filter .btm-box .imgBox{width: 1.2rem;height: 1.2rem;position:relative;}
#filter .imgBox img{ width: 100%; height: 100%; border: none;}
#filter .imgBox p{position: absolute;left: 0;bottom: 0.05rem;color: #fff;text-align: center;width: 100%;font-size: 0.18rem;}

#btm-nav,#camera{width: 100%;height: 1.2rem;background: url("../images/btn-cur.png") repeat-x;display: flex;justify-content: space-around;align-items: center;line-height: 1.2rem;}
#btm-nav a{color: #fff;font-size: 0.38rem;display: block;width: 100%;height: 100%;flex: 1;text-align: center;}
#btm-nav a.cur{ background:  url("../images/camera-bg.png") repeat-x;}

#camera{ background:  url("../images/camera-bg.png") repeat-x; background-size: cover}
#camera img{width: 1rem;height: 1rem;border: none;position: absolute;}


#home-topper{height: 1.8rem;display: flex;align-items: center;justify-content: space-between;padding: 0px 0.3rem;}
#home-topper img{ width: 2.19rem; height: 1.01rem;}
#home-topper a{display: block;width: 1.66rem;height: 0.55rem;background: url("../images/check.png") no-repeat;background-size: contain;}

#home-center{height: 7.7rem;background: url("../images/bg.png") no-repeat right bottom;background-size: auto 50%;}
#home-btm{background:url("../images/title-bar.png") repeat-x;overflow: hidden;background-size: cover;position: absolute;width: 100%;left: 0px;bottom: 0px;}
#home-btm ul{
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 0.26rem;
}
#home-btm li a{overflow: hidden;display: block;}
#home-btm ul img{width: 1.5rem;height: 1.61rem;float: left;}
#home-btm ul p{color: #6C6C6C;font-size: 0.28rem;text-align: center;padding: 0.2rem 0px 0.2rem;}

#ipt_box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 6rem;
    margin: 0.4rem auto;
}
#ipt_box textarea{border:none;outline: none;width: 4.8rem;height: 1.2rem;font-size: 0.36rem;font-family: myFont;color: #000;}
#ipt_box img{width: 1.2rem;height: 1.2rem;}

#img_box .list-box{
    display: flex;
    flex-wrap: wrap;
    padding-left: 0.86rem;
}

#img_box .list-box .myShow{
    width: 5.7rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: .18rem 0;
}
#img_box .list-box .myShow img{ width: 5rem;}
#img_box .list-box .myShow p{
    color: #FF8100;
    font-size: 0.4rem;}

#img_box .list-box:first-child{padding-top: 0.2rem;}
#img_box .list-box .show{position: relative;padding-bottom: 0.2rem;display: flex;flex-direction: column;}
#img_box .list-box .show img{
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.15rem;
    margin-right: 0.6rem;
}
#img_box .list-box .show p{text-align: center;color: #6C6C6C;font-size: 0.24rem;padding: 0.14rem 0.6rem 0px 0;}
#img_box .list-box .show .zan{position: absolute;width: 0.62rem;height: 0.58rem;right: 0px;bottom: 0.86rem;border-radius: 0;}

#img_box.list .list-box ul{width: 5.7rem;}
#img_box.list .list-box ul li{border-top: 1px solid #dbdbdb;padding: 0.219rem 0px;overflow: hidden;}
#img_box.list .list-box ul li:first-child{border-top: none;}
#img_box.list .list-box ul img{
    float: left;
    margin-right: 0.16rem;
    width: 2.18rem;
    height: 2.18rem;
}
#img_box.list .list-box ul .right{
    margin-top: .8rem;
}
#img_box.list .list-box .right h2{
    color: #FF8100;
    font-size: 0.32rem;
    margin-bottom: 0.2rem;
}
#img_box.list .list-box .right p{
    font-size: 0.26rem;
    margin: 0.05rem 0px;
}

#adv-box{background: #2d2c32;height: 1.97rem;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;}
#adv-box img{width: 1.9rem;height: 0.87rem;margin: 0.2rem 0px;}
#adv-box p{
    color: #FF8100;
    font-size: 0.4rem;
}


#five {
    margin: 0.15rem auto;
    display: flex;
    height: 7.58rem;
}
#five .pic{
    width: 3rem;
    margin: 0.13rem 0 0 .13rem;
}

#five .pic:first-child {
    margin-right: 0;

}

#five .pic:last-child {
    width: 3rem;
    margin-right: 0.15rem;
    display: flex;
    flex-direction: column;
}
#five .pic canvas {
    margin-bottom: 0.13rem;
}

#five .pic:first-child canvas{
    height: 50%;
}

#five .pic:last-child canvas {
    display: block;
    height: 1.26rem;
    flex: 1;
}

#complete {
    width: 6rem;
    background-color: #fff;
    margin: 0rem auto;
}
#complete .com-foot {
    margin: 0.38rem;
    margin-top: -0.38rem;
    display: none;
}
.com-foot img {
    width: 100%;
}


#drop{
    width:2.12rem;
    height:2.02rem;
    position:absolute;
    top:0px;
    left:0px;
    display: none;
}
#drop img{
    display: block;
    width: 100% !important;
    height:100% !important;
}
.pic{
    position: relative !important;
}
#file_head {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#camera img {
    display: block;
    position: absolute;
}

.wel{ width: 7.5rem; height: 12.06rem;}
.wel-bg1{ background: url("../images/wel/1.png") no-repeat; background-size: 100% 100%;}
.wel-bg2{ background: url("../images/wel/2.png") no-repeat; background-size: 100% 100%;}
.wel-bg3{ background: url("../images/wel/3.png") no-repeat; background-size: 100% 100%;}

#wrapper.wel-wrap{ background: url("../images/wel-bg.png") no-repeat; background-size: contain;}
#home-center.wel-center{ background: none; height: 9.05rem;}

.ipt-ct{
    text-align: center;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    margin-bottom: .18rem;
    width: 5.7rem; height: .55rem;
    border: 1px solid #D3D3D3;
}
.ipt-ct .txt{ width: 4rem; height: .55rem; text-indent: 5px; outline: none; border:none;}
.ipt-ct .btn{ width: 1rem; height: .55rem; border:none; outline: none;  background: url("../images/sear.png") no-repeat center center; background-size: auto 100%;}

.fenye-ct{
    overflow: hidden;
    padding-left: 1.4rem;
    margin-bottom: .15rem;}
.fenye-ct a{ display: block; background: #C4C4C4; color: #fff; float: left; font-size: .32rem; width: .4rem; height: .4rem; border-radius: .4rem; margin-right: .2rem; text-align: center; line-height: .4rem;}